<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>学生信息管理系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/layui/axios.min.js"></script>
    <script src="${pageContext.request.contextPath}/layui/common.js"></script>

</head>
<body>
<form class="layui-form" action="" style="margin:10px">

    <div class="layui-form-item">
        <label class="layui-form-label">旧密码</label>
        <div class="layui-input-block">
            <input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">新密码</label>
        <div class="layui-input-block">
            <input type="password" name="newPassword" id="pass" lay-verify="required" placeholder="请输入密码"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-block">
            <input type="password" lay-verify="required|password" placeholder="请输入密码" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
</form>

<script>
    //Demo
    layui.use('form', function () {
        let form = layui.form;
        let $ = layui.jquery;
        form.verify({
            // 自定义校验规则 value：表单的值、item：表单的DOM对象
            password: function (value, item) {
                // 获取第一次输入的新密码
                let newPass = $("#pass").val();
                if (newPass != value) {
                    return '两次输入的密码不一致';
                }
            },
        })
        //监听提交
        form.on('submit', function (data) {
            //layer.msg(JSON.stringify(data.field));
            axios.put("/modifyPass", data.field).then(ret => {
                if (ret.data.status) {
                    parent.layer.msg("密码修改成功")
                    // 关闭父组件的弹出层
                    parent.layer.close(parent.layer.getFrameIndex(window.name));

                } else if (ret.data.code === 20000) {
                    layer.msg(ret.data.message);
                }
            })
            return false;
        });
    });
</script>
</body>
</html>
